<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Insight</title>
    <link type="text/css" rel="stylesheet" href="../src/css/theme-ist.css?__ist__=1_0_10" />

    <style type="text/css">
        .my-select {width: 260px; height: 200px};
    </style>
</head>

<body>

<div ecui="id:matrixTable;type:matrix-table;width:300px;height:150px">
</div>    

    

    <script>
       var _TMP_WEB_ROOT_ = '../';
    </script>

    <script type="text/javascript" src="../asset/xcore-debug.js"></script>
    <script type="text/javascript" src="../asset/ecui-debug.js"></script>
    
    <script>

            var matrixTable = ecui.get('matrixTable');
            var colFields = [
                {
                    children: [
                        {
                            title: '阿斯蒂芬a1', content: 'a1', width: 40, 
                        },
                        {
                            title: '阿斯蒂芬a2', content: 'a2', width: 40, 
                        }
                    ]
                },
                {
                    children: [
                        {
                            title: '阿斯蒂芬a1', content: 'b1', width: 40, 
                        },
                        {
                            title: '阿斯蒂芬a1', content: 'b2', width: 40, 
                        },
                        {
                            title: '阿斯蒂芬a1', content: 'b3', width: 60, 
                        }
                    ]
                },
                {
                    children: [
                        {
                            title: '阿斯蒂芬a1', content: 'c1', width: 30, 
                        }
                    ]
                }
            ];
            var rowFields = [
                {
                    children: [
                        {
                            title: '阿斯蒂芬a1', content: 'a1', width: 40, 
                        },
                        {
                            title: '阿斯蒂芬a1', content: 'a2', width: 40, 
                        }
                    ]
                },
                {
                    children: [
                        {
                            title: '阿斯蒂芬a1', content: 'b1', width: 40, 
                        },
                        {
                            title: '阿斯蒂芬a1', content: 'b2', width: 40, 
                        }
                    ]
                },
            ];
            var cornerFields = [
                {
                    width: 60
                },
                {
                    width: 60
                }
            ];
            var data = [
                {
                    a1: 121322, b1:4334, a2: 5545, b2: 543434, b3: 'asdf', c1: 'vvvv'
                },
                {
                    a1: 121322, b1:4334, a2: 5545, b2: 543434, b3: 'asdf', c1: 'vvvv'
                },
                {
                    a1: 121322, b1:4334, a2: 5545, b2: 543434, b3: 'asdf', c1: 'vvvv'
                },
                {
                    a1: 121322, b1:4334, a2: 5545, b2: 543434, b3: 'asdf', c1: 'vvvv'
                }
            ];
            matrixTable.setFields(colFields, rowFields, cornerFields, true);
            matrixTable.setData(data);
            matrixTable.render();

    </script>
</body>

</html>